<template>
  <view style="position: relative;">
    <view class="goods-list-item" :style="{'background-color':goods.goods_state==true?'#f7f7f7':'#fff'}" >
      <!-- 左侧图片区域 -->
      <view class="goods-left" >
        <radio :checked="goods.goods_state" color="#c00000" v-if="showRadio" @click="radioclickHandler"></radio>
        <image :src="goods.goods_small_logo||defaultpic" @click="gotoGoodsDetail(goods)"></image>
      </view>
      <!-- 右侧信息区域 -->
      <view class="good-right" @click="gotoGoodsDetail(goods)">
        <!-- 商品信息 -->
        <view class="goods-message" >
          {{goods.goods_name}}
        </view>
        <!-- 商品描述 -->
        <!-- <view class="goods-info"> -->
          <view class="goods-prices">
            ￥{{goods.goods_price==0?99:goods.goods_price|tofixed}}
          </view>
          
        <!-- </view> -->
      </view>
    
    
    
    </view>
    <uni-number-box   v-if="showcount" :min="1" :max="9999" :value="goods.goods_count" @change="countChange"></uni-number-box>
  </view>
</template>

<script>
  import {mapMutations,mapGetters} from "vuex"
  export default {
    name: "my-goods",
    // 属性在props中声明接收
    props: {
      goods: {
        type: Object,
        default: {}
      },
      showRadio:{
        type:Boolean,
        default:false
      },
      showcount:{
        type:Boolean,
        default:false
      },
    },
    computed:{
      ...mapGetters('m_cart',['total'])
    },
    data() {
      return {
        defaultpic: "https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png"
      };
    },
    methods: {
      gotoGoodsDetail(item){
        uni.navigateTo({
          url: "/subpkg/good_detail/good_detail?goods_id=" + item.goods_id
        })
      },
      ...mapMutations('m_cart',['updateGoodsCount']),
      radioclickHandler(){
        this.$emit('radio-change',{
          goods_id:this.goods.goods_id,
          goods_state:!this.goods.goods_state
        })
      },
      countChange(nval){
        this.updateGoodsCount({
          goods_id:this.goods.goods_id,
          goods_count:nval
        }),
        uni.setTabBarBadge({
          index:2,
          text:this.total+''
        })
      }
    },
    filters: {
      tofixed(num) {
        return Number(num).toFixed(2)
      }
    }
  }
</script>

<style lang="scss">
  .goods-list-item {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 10px 5px;
    background-color: #fff;

    .goods-left {
      margin-right: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      image {
        width: 100px;
        height: 100px;
        display: block;
      }
    }

    .good-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 13px;
      padding: 8px 0;
        .goods-prices {
          color: #c00000;
          font-size: 16px;
        
        
      }
      
      }
    }
  
  uni-number-box{
    margin-right:28rpx;
    position: absolute;
    right: 0;
    bottom: 25rpx;
    }
</style>
